<template>
	<layer-box ref="layer" overlay-style="background: rgba(0, 0, 0, 0.50);backdrop-filter: blur(8.3px);" width="465px" height="auto">
		<view class="content">
			<view class="icon uv-flex-row">
				<icon-red-warn></icon-red-warn>
			</view>
			<uv-text text="删除账号" color="#BF2E2E" size="24px" align="center" margin="20px 0 6px"></uv-text>
			<uv-text text="即将删除该账号及所有学习记录，无法恢复。" color="#BF2E2E" size="16px" align="center"></uv-text>
			<uv-text text="您确定要删除账号吗？" color="#BF2E2E" size="16px" align="center"></uv-text>
			<uv-gap height="28px"></uv-gap>
			<view class="btns uv-flex-row">
				<btn-shine @click="close">取消</btn-shine>
				<btn-shine shine shineColor="red" :loading="btnLoading" @click="sub">{{btnLoading?'删除中...':'确认删除'}}</btn-shine>
			</view>
			<uv-gap height="46px"></uv-gap>
		</view>
	</layer-box>
</template>
<script setup>
	import { ref } from 'vue';
	import { unbindMobile } from '@/common/api/user.js';
	const layer = ref(null);
	const btnLoading = ref(false);

	async function sub() {
		btnLoading.value = true;
		await unbindMobile();
		getApp().globalData.getUserMoreInfo();
		close();
	}

	function open() {
		btnLoading.value = false;
		layer.value.open();
	}

	function close() {
		layer.value.close();
	}
	defineExpose({ open, close });
</script>
<style scoped lang="scss">
	.content {
		padding: 0 48px;
		.icon {
			justify-content: center;
			padding: 48px 0 0;
		}
		.btns {
			justify-content: space-between;
		}
		.error-tip {
			height: 40px;
			padding: 4px 0;
			font-size: 12px;
			color: #f56c6c;
		}
	}
</style>